<template>
  <!--使用方法如下：-->
  <!--传参： curPbx 当前pbx  ToPeerType 一级select节点类型值  ToPeer二级select流转-->
  <!--外抛事件：nodeSelectChange  把两个select的值抛出去 -->
  <div class="node-select-item">
    <el-select placeholder="请选择" style="width: 45%;" v-model="ToPeerTypeThis" @change="ToPeerTypeChange">
      <el-option
        v-for="item in toPeerTypeArr"
        :label="item.TypeName"
        :value="item.TypeValue">
      </el-option>
    </el-select>
    <span style="padding-top: 5px;display: inline-block;width: 10%;text-align: center;">一</span>
    <el-select placeholder="请选择" style="width: 45%" filterable v-model="ToPeerThis"  @change="ToPeerChange">
      <el-option
        v-for="item in ToPeerOptions"
        :label="item.name"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    name: 'nodeSelectItem',
    data () {
      return {
        toPeerTypeArr: [
          {TypeValue: 'system', TypeName: this.$t('configLazyLoad.process.node')},
          {TypeValue: 'ivr_node_queue', TypeName: '技能组'},
          {TypeValue: 'account_user', TypeName: '座席'},
          {TypeValue: 'ivr_node_announcement', TypeName: '播放语音节点'},
          {TypeValue: 'ivr_node_text_announcement', TypeName: '播放文本语音节点'},
          {TypeValue: 'ivr_node_ivr', TypeName: '按键菜单节点'},
          {TypeValue: 'ivr_node_encrypt_md5', TypeName: 'MD5加密节点'},
          {TypeValue: 'ivr_node_validation', TypeName: '采集输入节点'},
          {TypeValue: 'ivr_node_assignment', TypeName: '赋值节点'},
          {TypeValue: 'ivr_node_route', TypeName: '按变量路由节点'},
          {TypeValue: 'ivr_node_ivr_menu', TypeName: '转IVR菜单节点'},
          {TypeValue: 'ivr_node_call_url', TypeName: 'CallUrl节点'},
          {TypeValue: 'ivr_node_date', TypeName: this.$t('configLazyLoad.process.node8')},
          {TypeValue: 'ivr_node_twowaycall', TypeName: '双向回呼节点'},
          {TypeValue: 'ivr_node_asr', TypeName: '语音识别节点'},
          {TypeValue: 'ivr_node_voice_mail', TypeName: '留言节点'},
          {TypeValue: 'ivr_node_room', TypeName: '会议室节点'},
          {TypeValue: 'ivr_node_satisfaction', TypeName: '自定义满意度节点'},
          {TypeValue: 'ivr_node_superDialJobNum', TypeName: '采集工号并拨打节点'},
          {TypeValue: 'ivr_node_extension_peer', TypeName: '自定义节点'}
        ],
        systemPeerTypeArr: [
          {name: '挂机', value: '0'},
          {name: '满意度调查', value: '1'},
          {name: '拨工号', value: '2'}
        ],
        ToPeerTypeThis: '',
        ToPeerThis: ''
      }
    },
    props: {
      ToPeerType: {
        type: String,
        default: function () {
          return 'system'
        }
      },
      ToPeer: {
        type: String,
        default: function () {
          return '0'
        }
      },
      curPbx: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    methods: {
      //  流转  选择框 change
      ToPeerTypeChange (val) {
        this.ToPeerOptions = []
        this.flowOptionsChange(val, this.ToPeerOptions)
        if (val === this.ToPeerType) {
          this.ToPeerThis = this.ToPeer || this.ToPeerOptions[0].value
        } else {
          this.ToPeerThis = this.ToPeerOptions[0].value
        }
//        this.$emit('nodeSelectChange', {ToPeerType: this.ToPeerTypeThis, ToPeer: this.ToPeerThis})
      },
      ToPeerChange () {
//        this.$emit('nodeSelectChange', {ToPeerType: this.ToPeerTypeThis, ToPeer: this.ToPeerThis})
      },
      flowOptionsChange (val, options) {
        let toPeerArr = this.$store.state.session.ivrMap[this.curPbx].data[val]
        if (!val || val === 'system') {
          this.systemPeerTypeArr.forEach(item => {
            options.push({name: item.name, value: item.value})
          })
        } else {
          options.push({name: '--请选择--', value: ''})
          if (toPeerArr) {
            if (val === 'account_user') {
              toPeerArr.forEach(item => {
                options.push({name: item.displayName, value: item._id})
              })
            } else {
              toPeerArr.forEach(item => {
                options.push({name: item.DisplayName, value: item.Exten})
              })
            }
          }
        }
      },
      init () {
        this.ToPeerTypeThis = this.ToPeerType || this.toPeerTypeArr[0].TypeValue
        this.ToPeerTypeChange(this.ToPeerTypeThis)
//        this.$emit('nodeSelectChange', {ToPeerType: this.ToPeerTypeThis, ToPeer: this.ToPeerThis})
      }
    },
    watch: {
      ToPeerType () {
        this.init()
      },
      ToPeer () {
        this.init()
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>

<style lang="stylus" scoped>
</style>
